<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script th:src="@{/}+'js/day.js'"></script>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">  
    <div class="layui-card-body">
      <div class="layui-row">
    <div class="layui-row layui-col-space5">
		    <div class="layui-row">
		    <div class="layui-inline">
		         <input type="text" id="name" placeholder="用户名称/电话号码" autocomplete="off" class="layui-input">
		    </div>
		    <div class="layui-btn-group">
			    <button type="button" class="layui-btn layui-btn-primary" data-type="query">查询</button>
		  	</div>
		  	</div>
		 	  <div class="layui-row">
		 	  <div class="layui-col-md8">
		 	  <table id="user-table" lay-filter="user-table"></table>
		 	  </div>
		 	  <div class="layui-col-md4">
		 	  <form class="layui-form" lay-filter="myform" id="myform">
		 	  	<fieldset>
		 	  		<legend>已选择人员</legend>
		 	  		
		 	  	</fieldset>
		 	  </form>
		 	  </div>
		      
		      </div>
      		</div>
  </div>
    </div>
  </div>
</div>
<script type="text/html" id="checkboxTpl">
   <input type="checkbox" name="select" data-value="{{d.name}}" lay-filter="select" value="{{d.id}}" lay-skin="primary" {{#let userstr = userIds.join(",")+",";}}{{ userstr.indexOf(d.id+",")==-1 ? '' : 'checked' }}>
</script>

<script th:inline="javascript">
/*<![CDATA[*/
var userIdStr=/*[[${userIds}]]*/
/*]]>*/
</script>
<script th:inline="none">
//设备盘点计划用的也是这个页面
var userIds = [];
if(userIdStr){
	userIds = userIdStr.split(",");
	$.ajax({
		url: 'user/getList',
		type:'post',
		dataType:'json',
		data:{ids: userIdStr},
		success:function(res){
			userIds = [];
			var data = res.data;
			for(var i=0;i<data.length;i++){
				showRight(data[i].id,data[i].name,true);
			}
		}
	})
}
showRight = function(id,name,selected){
	  var fs = $("fieldset");
	  if(selected){
		  userIds.push(id);
		  var box = $("<span></span>").attr("id","s"+id).appendTo(fs);
		  var icon = $('<i style="color:blue;border:1px solid red" class="layui-icon">&#x1006;</i>');
		  icon.attr("id",id);
		  icon.on("click",function(){
			  for(var i=0;i<userIds.length;i++){
				  if(userIds[i]==id){
					  $(":input[value="+id+"]").removeAttr("checked").closest("td").find(".layui-form-checked").removeClass("layui-form-checked");
					  $("#s"+userIds[i]).remove();
					  userIds.splice(i,1);
					  break;
				  }
		  	   }
		  })
		  box.append(icon).append($("<label style='padding-right:13px'>" + name + "</label>"));
	  }else{
		  for(var i=0;i<userIds.length;i++){
			  if(userIds[i]==id){
				  $("#s"+userIds[i]).remove();
				  userIds.splice(i,1);
				  break;
			  }
		  }
	  }
	  
}
var height = $(document).height()-100;
$("fieldset").height(height-7)
layui.use(['table','form','element'], function(){
  var form = layui.form
  ,element = layui.element
  ,table = layui.table;
  table.render({
	    elem: '#user-table'
	    ,url: 'user/getPageList' 
	    ,where:{userIds: userIds.join(",")}
	    ,cols: [[
	      {type: 'numbers'}
	      ,{field: 'id', width: 150, title: 'ID',hide:true}
	      ,{field: 'name', width: 140, title: '用户名称'}
	      ,{field: 'nodeOrgName', title: '所属部门',width:160}
	      ,{field:'lock', title: '操作', width:110, templet: '#checkboxTpl', unresize: true}
	    ]]
	    ,page: true
	    ,limit: 10
	    ,height: height
	    ,text: '加载失败'
	    ,done:function(){
	    	//enableRowClick(table,form,'user-table',"user-table");
	    }
	  });
  form.on('checkbox(select)', function(obj){
	  showRight(this.value,$(this).data("value"),obj.elem.checked);
	  form.render();
  });

  var action = {
	query: function(){
		var whr = {name:$('#name').val(),userIds:userIds.join(",")};	 
		table.reload("user-table",{
			where:whr,page:{curr:1}
		}) 
	}
  };
  
  $('.layui-btn').each(function(i,obj){
	  $(this).on('click', function(){
		   var type = $(this).data('type');
		   action[type].call(this);
	  })
  });
});
</script>
<script type="text/html" id="rowtools">
  <a class="layui-btn layui-btn-xs" lay-event="assign">选择</a>
</script>
</body>